<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div style='width:600px;height:400px'></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js'></script>
  <script>
    (async function () {
      let res = await fetch('./mock.json').then(res => res.json())
      res.forEach(ele => {
        DataArr.push([ele.height, ele.weight])
      });
      var mycharts = echarts.init(document.querySelector('div'))
      var option = {
        title: {
          text: '身高体重分析',
          textStyle: {
            color: 'black'
          }
        },
        xAxis: {
          type: 'value',
          scale: true
        },
        yAxis: {
          type: 'value',
          scale: true
        },
        series: [
          {
            // type: 'scatter',
            type: 'effectScatter',
            // 鼠标滑过
            showEffectOn: 'emphasis',//render,emphasis
            // 扩散范围
            rippleEffect: {
              scale: 3
            },
            data: DataArr,
            symbolSize(arg) {
              let height = arg[0] / 100;
              let weight = arg[1];
              //BMI超大点,体重/身高m*身高m >28 肥胖
              let bmi = weight / (height * height)
              return bmi > 28 ? 20 : 5
            },
            //气泡颜色
            itemStyle: {
              color(arg) {
                let height = arg.data[0] / 100;
                let weight = arg.data[1];
                //BMI超大点,体重/身高m*身高m >28 肥胖
                let bmi = weight / (height * height)
                return bmi > 28 ? '#DF001D' : '#C50037'
              }
            }
          }
        ],
      }
      mycharts.setOption(option)
    })(DataArr = [])
  </script>
</body>

</html>